import React, { Component } from 'react'
import SalaryList from './_base/SalaryList'
import AdminAddSalaryForm from './_base/AdminAddSalaryForm'
import { connect } from 'react-redux'
import { addUserSalaryAsync, getUserSalaryListByAdminAsync } from '../../../_redux/actions_async'

class AdminSalaryPage extends Component {
  constructor (props) {
    super(props)
  }

  componentWillMount () {
    let userId = this.props.match.params.userId
    this.props.getUserSalaryListByAdminAsync(userId)
  }

  handleFinish = e => {
    this.props.addUserSalaryAsync({ ...e, userId: this.props.match.params.userId })
  }

  render () {
    let userId = this.props.match.params.userId
    return (
      <div>
        <AdminAddSalaryForm onFinish={this.handleFinish} title="添加薪资" btnName="添加" userId={userId}/>
        <SalaryList userId={userId} salaryList={this.props.salaryList}/>
      </div>
    )
  }
}

AdminSalaryPage.propTypes = {}

AdminSalaryPage = connect(
  ({ $AdminPageState: { salaryList } }) => ({ salaryList }),
  { getUserSalaryListByAdminAsync, addUserSalaryAsync }
)(AdminSalaryPage)

export default AdminSalaryPage
